<template>

<div>
  <el-form ref="form" label-width="80px">
    <br>

    <el-form-item label="订单编号">
      <el-col :span="22">
        <el-input placeholder="请输入订单编号" v-model="shop.num"></el-input>
      </el-col>
    </el-form-item>

    <el-form-item label="商品名称">
      <el-col :span="22">
        <el-input placeholder="请输入商品名称" v-model="shop.name"></el-input>
      </el-col>
    </el-form-item>


    <el-form-item label="金额">
      <el-col :span="22">
        <el-input placeholder="请输入金额" v-model="shop.money"></el-input>
      </el-col>
    </el-form-item>

    <el-form-item label="订单描述">
      <el-col :span="22">
        <el-input placeholder="请输入订单描述" v-model="shop.body"></el-input>
      </el-col>
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="pay" round><i class="el-icon-apple"></i>二维码付款</el-button>
    </el-form-item>

</el-form>

<!-- 支付弹窗 -->
    <el-dialog title="扫描支付" :visible.sync="isShow" width="30%">

          <div id="code" style="width:300px;height: 300px;" ></div>

      </el-dialog>
</div>
</template>

<script>
  export default {
      name:"aliPay",
      data(){
        return{
           shop:{
              num:"",
              name:"iphone13 pro Max",
              money:10350,
              body:"美国货"
           },
           isShow:false

        }
      },
      methods:{
        pay(){//付款
            //显示弹窗
            this.isShow = true;
            var mythis = this;
            //清空
            //this.dd="";
            $.ajax({
                url:"http://localhost:8080/Alipay/pay02",
                type:"get",
                data:mythis.shop,
                success:function(data){
                    if(data.url!="error"){
                      var qrcode = new QRCode(document.getElementById("code"), {
                                                 width : 300,
                                                 height : 300
                       });
                       //成才二维码
                       qrcode.makeCode(data.url);

                        // var  socke = new WebSocket("ws://2qqfwg.natappfree.cc/payServer")

                        // socke.onopen=function(){

                        // }
                        // socke.onclose=function(){

                        // }
                        // socke.onerror=function(){

                        // }
                        // //接收服务端发送的信息
                        // socke.onmessage=function(data){
                        //   console.log(data)
                        //   if(data.data=="ok"){
                        //     //关闭窗口
                        //     mythis.isShow = false;
                        //   }

                        // }

                    }else{
                      mythis.$alert("生成二维码失败");
                    }

                }
            })

        }
      }
  }
</script>

<style>
</style>
